<template>
  <div>
    <div class="bottom">
      <div class="bottomtitle"><h6>信赖合作伙伴</h6></div>
      <div class="friends">

        <div class="friend" v-for="(photosrc,index) in friends" :key="index">
          <img :src="photosrc" alt="合作伙伴">
        </div>
      
      </div>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      friends:[
        "https://picsum.photos/280/170?random=1",
        "https://picsum.photos/280/170?random=2",
        "https://picsum.photos/280/170?random=3",
        "https://picsum.photos/280/170?random=4",
        "https://picsum.photos/280/170?random=5",
      ]
    }
  },
}
</script>

<style scoped>
.bottom{
  background-color: #f5f5f5;
  height: 300px;
  padding: 50px 60px;
}
h6{
  text-align: left;
  font-size: 35px;
}
.friends{
  margin-top: 30px;

  display: flex;
  justify-content: space-between;

}
.friend{
  width: 280px;
  height: 170px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 5px 5px 10px rgba(102, 99, 99, 0.123);
}
img{
  width: 280px;
  height: 170px;
}
</style>